﻿@model List<Auction_Intranet.Models.RoomModel>

@{
    ViewBag.Title = "Rooms";
}

<div class="page">

    <h2 class="page-title">Rooms</h2>

    <div class="room-list">
        @{int index = -1;}
        @foreach (var item in Model)
        {
            index++;
            <section class="room-item">
                <aside class="room-info">
                    <ul>
                        <li><span class="item-title">Name:</span><span class="item-name">@item.room.Name</span></li>
                        <li><span class="item-title">Location:</span><span class="item-name">@item.room.Location</span></li>
                        <li><span class="item-title">Max. capacity:</span><span class="item-name">@item.room.Capacity</span></li>
                        <li><span class="item-title">Size:</span><span class="item-name">@item.room.Size</span></li>
                    </ul>
                </aside>

                <aside class="room-amenities">
                    <p>Amenities:</p>
                    <ul>
                        @foreach (var item2 in item.amenities)
                        { 
                            <li>@item2.Amenity.Name</li>
                        }
                    </ul>
                </aside>

                <div class="room-pictures">                  
                    <ul class="picture-list">   
                                         
                        @foreach (var item2 in item.pictures)
                        {                            
                            <li class="picture-item">
                                <a href="@Url.Content("~/Content/Photos/Rooms/Full/" + item2.Id + ".jpg")" class="gallery-@index img-link" rel="room-pic-@index"><img alt="Room picture" src="@Url.Content("~/Content/Photos/Rooms/Full/" + item2.Id + ".jpg")"/></a>
                            </li>
                        }                        
                    </ul>
                </div>

            </section>
        }
    </div>
</div>

<script type="text/javascript">
    $(function () {

        if ($(window).width() > 960) {
            var i = 0;
            $("section.room-item").each(function () {
                $("a.gallery-" + i).colorbox({ rel: "group-" + i });
                i++;
            });
        }
        else if ($(window).width() < 960 && $(window).width() >= 640) {
            var i = 0;
            $("section.room-item").each(function () {
                $("a.gallery-" + i).colorbox({ width: "70%", rel: "group-" + i });
                i++;
            });
        }
        else if ($(window).width() < 640) {
            $("a.img-link").click(function (event) {
                event.preventDefault();
            })
        }
        $(".room-pictures ul li.picture-item img").hover(function () {
            //$(this).effect("shake");
        });
    });
</script>

